<template>
	<view>
		<view>
			<u-tabbar
					:value="tabBarIndex"
					:fixed="true"
					:placeholder="true"
					:safeAreaInsetBottom="true"
					:border="false"
					activeColor="#6072FF" inactiveColor="#0000007F"
			>
				<u-tabbar-item :name="item.index" :text="item.title" v-for="(item,index) in tabBarList" :key="index"
							   @click="changeTabBar(item.index,item.title)">
					<image
							class="u-page__item__slot-icon"
							slot="active-icon"
							:src="staticFileUrl + item.activeIconUrl"
					></image>
					<image
							class="u-page__item__slot-icon"
							slot="inactive-icon"
							:src="staticFileUrl + item.inactiveIconUrl"
					></image>
				</u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabar-stats",
		data() {
			return {
				staticFileUrl: this.$configPath.staticFileUrl,
				tabBarList: [
					{
						index: 0,
						title: '礼品消耗',
						activeIconUrl: '/image/tabbar-ranking/gift-consume-select.png',
						inactiveIconUrl: '/image/tabbar-ranking/gift-consume.png',
					},
					{
						index: 1,
						title: '礼品回收',
						activeIconUrl: '/image/tabbar-ranking/gift-recovery-select.png',
						inactiveIconUrl: '/image/tabbar-ranking/gift-recovery.png',
					},
					{
					 index: 2,
						title: '礼品兑换',
						activeIconUrl: '/image/tabbar-ranking/gift-exchange-select.png',
						inactiveIconUrl: '/image/tabbar-ranking/gift-exchange.png',
					},
				],
				tabBarIndex: 0,
			};
		},
		methods: {
			Load(tabBarIndex){
				if(tabBarIndex != null){
					this.tabBarIndex = tabBarIndex;
				}
				const menu = this.tabBarList[this.tabBarIndex];
				this.changeTabBar(this.tabBarIndex,menu.title);
			},
			changeTabBar(e,t){
				this.tabBarIndex = e;
				uni.$emit("tabbarRanking", {msg:'66', index: e})
				uni.setNavigationBarTitle({
					title: t
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.u-page__item__slot-icon{
	width: 40rpx;
	height: 40rpx;
}
</style>
